<template>
  <div class="content clearfix">
    <!-- left -->
    <div class="left-content">
      <div class="left-box">
        <h4 class="title-h"><i></i><i>业务统计</i></h4>
        <div class="tabChange">
          <el-tabs v-model="activeTab" @tab-click="handleClick">
            <el-tab-pane label="至今" name="soFar">
              <div class="soBox">
                <div>
                  <h1>{{ playCount }}</h1>
                  <div class="zhijin play" id="soPlay"></div>
                </div>
                <div>
                  <h1 class="recordC">{{ recordCount }}</h1>
                  <div class="zhijin record" id="soRecord"></div>
                </div>
              </div>
              <div class="nameF">
                <span class="txt-play">内容播放数 (次)</span>
                <span class="txt-record">实时录制数 (次)</span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="月" name="monthFar">
              <div class="ytdBar" id="monthData"></div>
              <div class="nameT">
                <span class="play"
                  ><img
                    src="../../assets/images/content_bgBofang.png"
                    alt=""
                  />内容播放次数 (次)</span
                >
                <span class="record"
                  ><img
                    src="../../assets/images/content_bgluzhi.png"
                    alt=""
                  />实时录制次数 (次)</span
                >
              </div>
            </el-tab-pane>
            <el-tab-pane label="周" name="weekFar">
              <div class="ytdBar" id="weekData"></div>
              <div class="nameT">
                <span class="play"
                  ><img
                    src="../../assets/images/content_bgBofang.png"
                    alt=""
                  />内容播放次数 (次)</span
                >
                <span class="record"
                  ><img
                    src="../../assets/images/content_bgluzhi.png"
                    alt=""
                  />实时录制次数 (次)</span
                >
              </div>
            </el-tab-pane>
            <el-tab-pane label="日" name="dayFar">
              <div class="ytdBar" id="dayData"></div>
              <div class="nameT">
                <span class="play"
                  ><img
                    src="../../assets/images/content_bgBofang.png"
                    alt=""
                  />内容播放次数 (次)</span
                >
                <span class="record"
                  ><img
                    src="../../assets/images/content_bgluzhi.png"
                    alt=""
                  />实时录制次数 (次)</span
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- right -->
    <div class="right-content">
      <div class="right-box">
        <div class="right-top">
          <h4 class="title-h"><i></i><i>个人资源分布</i></h4>
          <div class="resourceTrend" id="resource"></div>
        </div>
        <div class="right-bottom">
          <div class="left-bottom fl">
            <h4 class="title-h"><i></i><i>空间占比&nbsp;&nbsp;(2T)</i></h4>
          </div>
          <div class="right-bottom fl">
            <h4 class="title-h"><i></i><i>服务状态&nbsp;&nbsp;(3)</i></h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts-liquidfill/src/liquidFill.js";
import { businessStatus } from "@/api/index";
import { EleResize } from "@/utils/esresize";
export default {
  name: "HomePage",
  data() {
    return {
      activeTab: "soFar",
      playCount: 1660,
      recordCount: 530,
    };
  },
  methods: {
    handleClick(tab) {
      // console.log(tab);
      if (tab.name == "monthFar") {
        this.$nextTick(function () {
          this.monthBar();
        });
      }
      if (tab.name == "weekFar") {
        this.$nextTick(function () {
          this.weekBar();
        });
      }
      if (tab.name == "dayFar") {
        this.$nextTick(function () {
          this.dayBar();
        });
      }
    },
    //业务统计 至今
    async soFarPlay() {
      // let chart = this.$refs.soPlayChart;
      let chart = document.getElementById("soPlay");
      let chart1 = document.getElementById("soRecord");
      let soPlayChart = echarts.init(chart);
      let soRecordChart = echarts.init(chart1);

      let data = {
        type: "tillnow",
      };
      let res = await businessStatus.play(data);
      if (res.result === true) {
        console.log(res, "统计数据");
      } else {
        // console.log(res.msg, "错误");
      }

      this.soFarOption(soPlayChart, soRecordChart, 743, 1662);
      // 自适应
      this.selfAdapting(soPlayChart, chart);
      this.selfAdapting(soRecordChart, chart1);
    },
    // echarts自适应
    selfAdapting(init, dom) {
      let listener = function () {
        init.resize();
      };
      EleResize.on(dom, listener);
    },
    // 补零函数
    toDou(iNum) {
      return iNum < 10 ? "0" + iNum : "" + iNum;
    },
    // 至今echarts
    soFarOption(soPlayChart, soRecordChart, recordCount, playCount) {
      var count = recordCount + playCount;
      var data1 = [],
        data2 = [];
      if (count != 0) {
        //如果总数为0那么直接走else给默认值
        data1.push(playCount / count >= 1 ? 0.85 : playCount / count);
        data1.push(
          playCount / count >= 1 ? 0.85 - 0.02 : playCount / count - 0.02
        );
        data2.push(recordCount / count >= 1 ? 0.85 : recordCount / count);
        data2.push(
          recordCount / count >= 1 ? 0.85 - 0.02 : recordCount / count - 0.02
        );
      } else {
        data1 = [0, 0];
        data2 = [0, 0];
      }
      let option = {
        series: [
          {
            color: ["#CCC"],
            type: "liquidFill",
            amplitude: 10,
            data: data1, //[0.6],
            radius: "163%",
            outline: {
              show: false,
            },
            silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
            backgroundStyle: {
              borderColor: "#0d1d34",
              color: "rgba(19,41,72,0.6)",
              borderWidth: 2,
            },
            shape:
              "path://M0,19.589C0,19.59,12.542,0.133,86.237,0.092c73.639-0.039,86.236,19.497,86.236,19.497v224.215H0V19.589L0,19.589z",
            //shape:'rect',
            label: {
              normal: {
                position: ["50%", "30%"],
                formatter: "",
                textStyle: {
                  fontSize: 40,
                  color: "#9bc3ff",
                  insideColor: "#9bc3ff",
                },
              },
            },
            itemStyle: {
              //图像颜色渐变
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(138,178,236,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(40,48,69,0.1)",
                  },
                ]),
              },
            },
          },
        ],
      };
      let option1 = {
        series: [
          {
            color: ["#C5DA51", "#D8E69B", "#dae89b", "#dae89b"],
            type: "liquidFill",
            data: data2,
            amplitude: 10,
            radius: "163%",
            outline: {
              show: false,
            },
            silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
            backgroundStyle: {
              borderColor: "#0d1d34",
              color: "rgba(19,41,72,0.6)",
              borderWidth: 2,
              //shadowColor: 'rgba(255, 0, 0, 0.6)',
              //shadowBlur: 20
            },
            shape:
              "path://M0,19.589C0,19.59,12.542,0.133,86.237,0.092c73.639-0.039,86.236,19.497,86.236,19.497v224.215H0V19.589L0,19.589z",
            //shape:'rect',
            label: {
              normal: {
                position: ["50%", "30%"], //显示的文字位置
                formatter: "",
                textStyle: {
                  fontSize: 40,
                  color: "#ff7a7a",
                  insideColor: "#ff7a7a",
                },
              },
            },
            itemStyle: {
              //图像颜色渐变
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(208,104,109,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(40,48,69,0.1)",
                  },
                ]),
              },
            },
          },
        ],
      };
      // window.onresize = function () {
      //   soPlayChart.resize();
      //   soRecordChart.resize();
      // };
      soPlayChart.setOption(option);
      soRecordChart.setOption(option1);
    },

    // 月
    monthBar() {
      let monthData = document.getElementById("monthData");
      let monthChart = echarts.init(monthData);

      let xData = ["202105", "202106", "202107", "202108", "202109"];
      let yData1 = [60, 60, 60, 60, 40];
      let yData2 = [30, 40, 60, 70, 10];
      this.businessBar(monthChart, xData, yData1, yData2, 50);
      this.selfAdapting(monthChart, monthData); //自适应
    },
    //周
    weekBar() {
      let monthData = document.getElementById("weekData");
      let monthChart = echarts.init(monthData);

      let xData = ["202105", "202106", "202107", "202108", "202109"];
      let yData1 = [10, 60, 60, 60, 40];
      let yData2 = [30, 40, 50, 80, 10];
      this.businessBar(monthChart, xData, yData1, yData2, 50);
      this.selfAdapting(monthChart, monthData); //自适应
    },
    //周
    dayBar() {
      let monthData = document.getElementById("dayData");
      let monthChart = echarts.init(monthData);

      let xData = ["202105", "202106", "202107", "202108", "202109"];
      let yData1 = [10, 60, 60, 60, 40];
      let yData2 = [30, 40, 50, 80, 10];
      this.businessBar(monthChart, xData, yData1, yData2, 50);
      this.selfAdapting(monthChart, monthData); //自适应
    },
    // 业务统计 月 周 日
    businessBar(myChart, xData, yData1, yData2, n) {
      var options = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          x: "10%",
          y: "15%",
          // x2:'15%',
          y2: "15%",
        },
        dataZoom: {
          show: true,
          realtime: true,
          //dataBackgroundColor:'#7aafff',
          borderColor: "#7aafff", //边框颜色
          fillerColor: "#192b44", //选中区域的颜色
          handleColor: "#7aafff",
          start: n,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: xData, //['北京','河北','新疆','山东'],
            //x轴轴线的样式
            axisLine: {
              lineStyle: {
                color: "#6d869c",
              },
            },
            //x轴字体样式
            axisLabel: {
              textStyle: {
                fontSize: 16,
                color: "#cee2ff",
              },
              //x轴刻度间距
              interval: 0,
            },
            //		 	       		axisTick: {length:5},
          },
        ],
        yAxis: [
          {
            name: "单位(次)",
            nameTextStyle: { fontSize: 16 }, //坐标轴名称字体的样式

            //max:100,
            //刻度是否显示
            axisTick: {
              show: true, //false
            },
            splitLine: {
              show: false,
            },
            type: "value",
            //y轴轴线的样式
            axisLine: {
              lineStyle: {
                color: "#6d869c",
              },
            },
            //y轴字体样式
            axisLabel: {
              show: true, //false,//y轴数值是否显示
              textStyle: {
                fontSize: 16,
                color: "#cee2ff",
              },
            },
          },
        ],
        series: [
          {
            name: "内容播放",
            type: "bar",
            data: yData1, //[ 60, 60, 60, 60],
            /*itemStyle: {
		 	                           color:'pink'
		 	                       }*/

            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(122,175,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(19,39,66,0.1)",
                  },
                ]),
              },
            },
          },
          {
            name: "实时录制",
            type: "bar",
            data: yData2, //[ 20, 40, 60, 70],
            /*itemStyle: {
		 	                           color:'pink'
		 	                       }*/

            itemStyle: {
              //图像颜色渐变
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(255,122,122,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(40,48,69,0.1)",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.clear();
      myChart.setOption(options, true);
    },
  },
  mounted() {
    this.soFarPlay(); //至今
    // this.monthBar(); //月
    // this.weekBar(); //周
    // this.dayBar(); //日
  },
};
</script>
<style lang="less">
.tabChange {
  .el-tabs__header {
    overflow: hidden;
    .el-tabs__nav-wrap {
      width: 200px;
      float: right;
      &::after {
        width: auto;
      }
      .el-tabs__item {
        color: #6ea7fe;
        font-size: 15px;
        padding-bottom: 35px;
        &.is-active {
          color: #cee2ff;
        }
      }
    }
  }
  .el-tabs__active-bar {
    background-color: #cee2ff;
    height: 2.5px;
    width: 40px !important;
    left: -12px;
  }
}
</style>
<style lang='less' scoped>
.content {
  width: 100%;
  height: calc(100vh - 90px);
  padding-top: 20px;
  .left-content {
    float: left;
    width: 649px;
    height: 99%;
    background-image: url("~@/assets/images/bg_left.png");
    background-size: 100% 100%;
    .left-box {
      width: 90%;
      height: 87%;
      margin-left: 42px;
      margin-top: 4.6%;
      .tabChange {
        width: 95%;
        margin: 0 auto;
        // 至今
        .soBox {
          width: 100%;
          margin-top: 35px;
          height: 297px;
          // background-color: pink;
          display: flex;
          justify-content: space-around;
          background: url("~@/assets/images/line.png") center bottom no-repeat;
          background-size: 100%;
          h1 {
            width: 155px;
            height: 45px;
            line-height: 45px;
            color: #9bc3ff;
            font-size: 40px;
            text-align: center;
            margin-bottom: 15px;
          }
          .recordC {
            color: #ff7a7a;
          }
          .zhijin {
            width: 154px;
            height: 230px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
          }
          .play {
            // background-color: #eee;
            border: 0.02rem solid #475c7b;
          }
          .record {
            // background-color: #bfa;
            border: 0.02rem solid #674f4f;
          }
        }
        .nameF {
          width: 95%;
          height: 30px;
          font-size: 17px;
          box-sizing: border-box;
          margin-top: 15px;
          .txt-play {
            color: #9bc3ff;
            margin-left: 15%;
          }
          .txt-record {
            color: #f47576;
            margin-left: 31%;
          }
        }
        // 月
        .ytdBar {
          width: 100%;
          height: 350px;
          // background-color: #eee;
          // margin-top: 10px;
        }
        .nameT {
          font-size: 18px;
          color: #6ea7fe;
          margin-top: 20px;
          img {
            vertical-align: sub;
          }
          .play {
            margin-left: 10%;
          }
          .record {
            color: #f47576;
            margin-left: 10%;
          }
        }
      }
    }
  }
  .right-content {
    float: left;
    width: 692px;
    height: 96%;
    margin-left: 32px;
    background-image: url("~@/assets/images/bg_right.png");
    background-size: 100% 100%;
    .right-box {
      width: 100%;
      height: 90%;
      margin-top: 4.6%;
      .right-top {
        width: 100%;
        height: 45%;
        .resourceTrend{
          width: 90%;
          height: 70%;
          margin: 0 auto;
          background-color: rgb(70, 105, 134);
        }
      }
      .right-bottom {
        width: 100%;
        height: 55%;
        .left-bottom {
          width: 43%;
          height: 100%;
        }
        .right-bottom {
          width: 57%;
          height: 100%;
        }
      }
    }
  }
  //小标题
  .title-h {
    width: 100%;
    height: 23px;
    line-height: 23px;
    color: #c5d8f5;
    font-size: 19px;
    margin-left: 22px;
    margin-bottom: 15px;
    i {
      float: left;
      &:nth-child(1) {
        display: inline-block;
        width: 51px;
        height: 100%;
        background-image: url("~@/assets/images/content_bgTitle.png");
        background-size: 100% 100%;
      }
    }
  }
}
</style>
